<template>
  <div>
    <el-form label-position="left" label-width="100px">
      <el-card v-if="status == 1" class="show">
        <div slot="header" class="clearfix">
          <span>投诉处理</span>
        </div>
        <el-row>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="处理人:">
              <span>{{ dealDetail.founderName }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="处理时间:">
              <span>{{ dealDetail.foundtime | unixTimestampFilter }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉核实:">
              <span>{{ dealDetail.boolReal == '1' ? '属实' : '不属实' }}</span>
            </el-form-item>
          </el-col>
          <!-- 属实 -->
          <template v-if="dealDetail.boolReal == '1'">
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item label="服务师傅:">
                <span>{{ workerName }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item label="师傅电话:">
                <span>{{ workerPhone }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" :xl="6">
              <el-form-item label="处理措施:">
                <span>{{ dealDetail.dealWithNo | filterDataBaseDictionary }}</span>
              </el-form-item>
            </el-col>
          </template>

          <el-col :md="12" :lg="8" :xl="6" v-if="dealDetail.dealWithNo == 'COMPLAINRESULT1'">
            <el-form-item label="扣除积分:">
              <span>{{ dealDetail.deductScore }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" v-if="dealDetail.dealWithNo == 'COMPLAINRESULT4'">
            <el-form-item label="扣除费用:">
              <span>{{ dealDetail.deductMoney }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" v-if="dealDetail.dealWithNo == 'COMPLAINRESULT1'">
            <el-form-item
              :label="dealDetail.boolReal && dealDetail.dealWithNo == 'COMPLAINRESULT3' ? '提醒消息:' : '处理备注:'">
              <span>{{ dealDetail.dealWithMemo }}</span>
            </el-form-item>
          </el-col>

          <el-col :md="12" :lg="8" :xl="6" v-if="dealDetail.dealWithNo == 'COMPLAINRESULT1'">
            <el-form-item label="处理附件:">
              <uploadImage readonly :value="stringToArr(dealDetail.dealWithImg)" :formData="{group: '1'}"></uploadImage>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="show">
        <div slot="header" class="clearfix">
          <span>投诉信息</span>
          <small v-if="status == 0" class="font-red">你的投诉已经提交，请耐心等待客服反馈投诉处理结果。</small>
        </div>
        <el-row>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉流水:">
              <span>{{ complainNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉性质:">
              <span>{{ complainNature }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉人:">
              <span>{{ founderName }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉人电话:">
              <span>{{ complainPhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉原因:">
              <span>{{ complainCause }}</span>
            </el-form-item>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <el-form-item label="投诉说明:">
              <span>{{ complainMemo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="投诉照片:">
              <uploadImage readonly :value="complainPicture" :formData="{group: '1'}"></uploadImage>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>
<script>
import {isInteger, range, isFormatNumber} from '@/utils/validate'
import {stringToArr} from '@/filters'
import {alert, dotData, copy, confirm} from '@/utils'

export default {
  props: {
    complainId: {
      type: String,
      required: true
    },
    status: {
      type: String,
      required: true
    },
    isSeller: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    complainCause() {
      return dotData(this.detail, 'complainCause')
    },
    complainNo() {
      return dotData(this.detail, 'complainNo')
    },
    complainNature() {
      return dotData(this.detail, 'complainNature')
    },
    founderName() {
      return dotData(this.detail, 'founderName')
    },
    complainPhone() {
      return dotData(this.detail, 'complainPhone')
    },
    complainMemo() {
      return dotData(this.detail, 'complainMemo')
    },
    complainPicture() {
      return stringToArr(dotData(this.detail, 'complainPicture'))
    },
    workerName() {
      return dotData(this.detail, 'workerName')
    },
    workerPhone() {
      return dotData(this.detail, 'workerPhone')
    },
    orderMoney() {
      return dotData(this.detail, 'orderMoney')
    }
  },
  data() {
    return {
      model: {
        dealImg: [],
        boolReal: '',
        dealWithNo: '',
        dealWithDeduct: ''
      },
      loading: false,
      boolReal: true,
      complainResult: [],
      detail: {},
      dealDetail: {}
    }
  },
  watch: {
    'model.boolReal'(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.model.dealWithNo = ''
    },
    'model.dealWithNo'(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.model.dealWithDeduct = ''
    }
  },
  created() {
    if (this.status === '1') {
      this.$ajax.get('/ms-fahuobao-order/fhbComplain/findComplainResultInfo', {complainId: this.complainId}).then(response => {
        if (response.success) {
          this.dealDetail = response.data
        }
      })
    }
    this.$ajax.get('/ms-fahuobao-order/fhbComplain/findComplainInfo', {complainId: this.complainId}).then(response => {
      if (response.success) {
        this.detail = response.data
      }
    })
  },
  methods: {
    isInteger,
    range,
    isFormatNumber,
    stringToArr,
    submit() {
      this.$refs.elForm.validate(result => {
        if (!result) {
          alert('验证未通过')
          return
        }
        let data = copy(this.model, true)
        data.complainId = this.complainId
        this.loading = true
        this.$ajax.post('/ms-fahuobao-order/fhbComplain/complainRecordBean', data).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.loading = false
            confirm('处理成功', '提示', {
              type: 'success'
            }).then(_ => {
              this.$router.push({path: '/ss-fhb-admin/complaint'})
            })
          } else {
            this.loading = false
          }
        }).catch(_ => {
          this.loading = false
        })
      })
    }
  }
}
</script>
